<template>
   <div class="validate-input-container pb-3">
    <input
      v-if="tag !== 'textarea' "
      class="form-control"
      :class="{'is-invalid':inputRef.error}"
      @blur="validateInput"
      v-model="inputRef.val"
      v-bind="$attrs"
    />
    <textarea 
      v-else
      class="form-control"
      :class="{'is-invalid':inputRef.error}"
      @blur="validateInput"
      v-model="inputRef.val"
      v-bind="$attrs"
    />
    <span v-if="inputRef.error" class="invalid-feedback">{{inputRef.message}}</span>
  </div>
</template>

<script lang="ts">
import { defineComponent, reactive, PropType,onMounted,watch, computed } from 'vue'
import { emitter } from './ValidateForm.vue'
const emailReg = /^[a-zA-Z0-9.!#$%&’*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$/
interface RuleProp {
  type: 'required' | 'email' | 'custom';
  message: string;
  validator?: () => boolean;
}
export type RulesProp = RuleProp[]
export type TagType = 'input' | 'textarea'
export default defineComponent({
  props: {
    rules: Array as PropType<RulesProp>,
    modelValue:String,
    tag:{
      type: String as PropType<TagType>,
      default:'input'
    }
  },
  inheritAttrs:false,//不希望根组件继承attribute
  setup(props,context) {
    console.log(context.attrs);
    const inputRef = reactive({
      val: computed({
        get:()=> props.modelValue || '',
        set: val =>{
          context.emit('update:modelValue',val)
        }
      }),
      error: false,
      message: ''
    })
   /*  watch(() => props.modelValue, (newValue) =>{
      inputRef.val = newValue || ''
    }) */
    //自定义事件 v-model的改造
    const updateValue = (e:KeyboardEvent)=>{
        console.log('update triggered')
        const targetValue = (e.target as HTMLInputElement).value
        inputRef.val = targetValue
        context.emit('update:modelValue',targetValue)
    };
    const validateInput = () => {
      if (props.rules) {
        const allPassed = props.rules.every(rule => {
          let passed = true
          inputRef.message = rule.message
          switch (rule.type) {
            case 'required':
              passed = (inputRef.val.trim() !== '')
              break
            case 'email':
              passed = emailReg.test(inputRef.val)
              break
            case 'custom':
              passed = rule.validator ? rule.validator() :true
              break
            default:
              break
          }
          return passed
        })
        inputRef.error = !allPassed;
        return allPassed
      }
      return true
    }
    // 将事件发射出去，其实就是把验证函数发射出去
     onMounted(() => {
      emitter.emit('form-item-created', validateInput)
    })
    return {
      inputRef,
      validateInput,
    }
  }
})
</script>